<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 30px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div>

</div>
<script>
    let dom = document.querySelector("div")

    move(dom, 'width', 500, 10000)

    function move(dom, prop, target, time, callBack) {
        //dom：节点，prop：属性，target：属性的目标值
        //time：间隔时间，callBack：动画结束后执行的内容
        //parseFloat用于去掉单位转换为数字
        // getComputedStyle用于获取节点属性真实值
        let init = parseFloat(getComputedStyle(dom)[prop]);
        let speed = 10 * (target - init) / time;
        let bool = target > init;
        fn()
        function fn() {
            init += speed;
            //判断停止
            if (bool ? init >= target : init <= target) {
                dom.style[prop] = target + 'px';
                callBack && callBack();
                return;
            }
            dom.style[prop] = init + 'px';
            requestAnimationFrame(fn);
        }
    }

</script>
</body>
</html>